<template>
  <view>
    <van-sticky>
      <van-search
        v-model="title"
        placeholder="请输入搜索关键词"
        input-align="center"
        @input="onSearch"
      />
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="load_more"
                offset="20" :error.sync="error" error-text="请求失败，点击重新加载" :immediate-check="immediateCheck">
        <view v-for="item in list" @click="openDetail(item, 'notice')">
          <view class="noticeList">
            <view class="date-box">
              <text class="date-day">{{item.createTime.slice(5,7)}}/{{item.createTime.slice(8,11)}}</text>
              <text class="date-year">{{item.createTime.slice(0,4)}}</text>
            </view>
            <u-line class="u-line" color="#E4E4E4" direction="col"></u-line>
            <view class="content-box">
              <text class="notice-title">{{ item.title }}</text>
              <text class="notice-subtitle">{{util.htmlToString(item.tgContent)}}</text>
            </view>
          </view>
          <u-line class="u-line" color="#E4E4E4"></u-line>
        </view>
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,   // 加载状态
      finished: false,  // 是否加载
      refreshing: false,// 是否刷新
      error: false,     // 错误状态
      pageNum: 1,   		// 页数
      pageSize: 10, 		// 条数
      immediateCheck: true, // 是否在初始化时立即执行滚动位置检查　　　
      title:'',//搜索关键字
      searchContent:'',
    }
  },
  methods: {
    onSearch(){
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.searchContent= this.title
        this.onRefresh()
      },300)

    },
    // 下拉刷新
    onRefresh() {
      // 先清空数据
      this.list = []
      // 将没有更多的状态改成false
      this.finished = false
      // 默认加载第一页
      this.pageNum = 1
      this.getList()
      this.refreshing = false
    },

    // 上拉加载
    load_more() {
      // 页数设置
      if (this.list.length == 0) {
        this.pageNum = 1
      } else {
        this.pageNum++
      }
      // 将下拉刷新停止
      this.refreshing = false;
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    // 获取收文数据
    getList() {
      // 加载状态
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/caac/oa/annunciate/queryBrowseInfoList'),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,
          'systemFlag': this.cache.get('userInfo').systemFlag,
          'page': this.pageNum,
          'rows': this.pageSize,
          'title': this.searchContent
        })
      }).then(({data}) => {
        if (data.code == 200) {
          if (this.util.isNotEmpty(data.data)) {
            if (this.pageNum == 1) {
              this.list = data.data.rows
            } else {
              data.data.rows.forEach(t => this.list.push(t))
            }
            // 判断当前页是否为最后一页
            if ((this.pageNum * this.pageSize) > data.data.total) {
              this.finished = true
            }
          } else {
            this.finished = true
          }
        } else {
          this.error = true
        }
      }).catch((err) => {
        this.error = true
      }).finally(() => {
        // 关闭加载状态
        this.loading = false
      })
    },
    // 打开详情
    openDetail(item, type) {
      uni.navigateTo({
        url: '/pages/caac/components/newsList/compo-detail?from=' + type,
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', item)
        }
      })
    },


  },
}
</script>

<style>
	.noticeList{
		display: flex;
		flex-direction: row;
		height: 200rpx;
		align-items: center;
		background-color: #FFFFFF;
	}
	.date-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 22%;
	}
	.date-day{
		color: #666666;
		font-size: 32rpx;
	}
	.date-year{
		margin-top: 20rpx;
		font-size: 28rpx;
      color: #999999;
	}
	.content-box{
		padding: 0 40rpx 0 20rpx;
		display: flex;
		flex-direction: column;
		width: 78%;
	}
	.notice-title{
		font-size: 30rpx;
		padding-bottom: 30rpx;
		display: block;
        color: #666666;
	}
	.notice-subtitle{
		font-size: 26rpx !important;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.u-line{
		height: 80% !important;
		margin: 0rpx 10rpx !important;
	}

	.u-line-row{
		margin: 0 30rpx !important;
	}
</style>
